<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: pink;
			}
			canvas{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background: white;
			}
		</style>
	</head>
	<body>
		<canvas width="400" height="400"></canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var oc = document.querySelector("canvas");
			if(oc.getContext){
				var ctx = oc.getContext("2d");
				
				
				var arr=[];
				
				//将数组中的圆绘制到画布上
				setInterval(function(){
					ctx.clearRect(0,0,oc.width,oc.height);
					//动画
					for(var i=0;i<arr.length;i++){
						
						if(arr[i].alp<=0){
							arr.splice(i,1);
						}
						
						arr[i].r++;
						arr[i].alp-=0.01;
					}
					
					
					//绘制
					for(var i=0;i<arr.length;i++){
						ctx.save();
						ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].alp+")";
						ctx.beginPath();
						ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
						ctx.fill();
						ctx.restore();
					}
				},1000/60)
				
				
				
				
				
				//往arr中注入随机圆的信息
				setInterval(function(){
					var x = Math.random()*oc.width;
					var y = Math.random()*oc.height;
					var r =10;
					var red =   Math.round(Math.random()*255);
					var green = Math.round(Math.random()*255);
					var blue =  Math.round(Math.random()*255);
					var alp = 1;
					
					arr.push({
						x:x,
						y:y,
						r:r,
						red:red,
						green:green,
						blue:blue,
						alp:alp
					})
				},50)
			}
		}
		
		
	</script>
</html>
